<template>
  <transition name="page">
    <div class="wrapper">
      <component-back :title="title"></component-back>
      <components-scroll class="scroll">
        <div class="content">
          <div v-html="content"></div>
          <!-- <div class="copy">版权所有</div> -->
        </div>
      </components-scroll>
    </div>
  </transition>
</template>

<script>
import ComponentBack from 'common/back'
import ComponentsScroll from 'common/scroll'
export default {
  name: 'MeAbout',
  components: {
    ComponentBack,
    ComponentsScroll
  },
  data () {
    return {
      title: '关于我们',
      content: ''
    }
  },
  methods: {
    getAbout () {
      this.$api.person.getAboutInfo()
        .then(this.getAboutSucc)
    },
    getAboutSucc (res) {
      const CODE_OK = this.$api.CODE_OK
      const LOGIN_CODE = this.$api.LOGIN_CODE
      res = res.data
      if (res.code === CODE_OK && res.data) {
        const data = res.data
        this.content = data
      } else if (res.code === LOGIN_CODE) {
        this.$reLogin()
      }
    }
  },
  created () {
    this.getAbout()
  }
}
</script>

<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.wrapper
  position absolute
  z-index 10
  top 0
  left 0
  bottom 0
  right 0
  background-color $common_bgc
  touch-action none

  .scroll
    top 108px

  .content
    padding()
    width 100%

    .logo-wrap
      width 100%
      height 380px
      position relative

      .logo
        width 248px
        height 28px
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)
        bgckImg('~@/assets/images/logo_black.png', center, center)

    .intro
      min-height 150px
      font-size $address
      font-weight 400
      color $location
      line-height 36px
      margin-bottom 400px

    .contact
      padding-left 255px
      padding-right 255px
      font-size $address
      font-weight 500
      color $common_fz_color
      line-height 36px
      text-align center
      margin-bottom 100px

    .copy
      width 100%
      text-align center
      font-size $common_fz
      font-weight 400
      color $original_price
      line-height 36px

.page-enter-active, .page-leave-active
  transition all 0.3s

.page-enter, .page-leave-active
  transform translate3d(100%, 0, 0)
</style>
